<template>
	<div class='menu-panel'>
		<!-- 未登录状态 -->
		<el-button
			v-if="storeGetter('getUserInfo') === null"
			class="login-btn"
			type="primary"
			size="large"
			round
			@click="$pushTo('Login')"
		>
			登录Aha口袋
		</el-button>
		<!-- 登录状态， 显示头像和昵称，点击进入个人桌面 -->
		<div
			v-else
			class="menu-content "
		>
			<div class="menu-content-grid">
				<div
					class="item"
					v-for="item in menuGrids"
					:key="item.icon"
					@click="item.cb"
				>
					<Iconfont
						:name="item.icon"
						size="22px"
					/>
					<p>{{item.label}}</p>
				</div>
			</div>
			<Avatar
				class="avatar"
				:src="storeGetter('getUserInfo').userInfo.avatarUrl"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { storeGetter } from '@/utils/store'
import { $pushTo } from '@/utils/functions'
import Avatar from '@/components/Avatar/index.vue'

const menuGrids = [
  { label: '主页', icon: 'icon-zhuye', cb: () => $pushTo('Home') },
  { label: '发布项目', icon: 'icon-fabu', cb: () => $pushTo('DashboardCompProject') },
  { label: '个人面板', icon: 'icon-geren', cb: () => $pushTo('DashboardBasicInfo') },
]
console.log(storeGetter('getUserInfo'))
</script>

<style lang="scss" scoped>
.menu-panel {
  z-index: 10;

  .login-btn {
    position: fixed;
    top: 5%;
    right: 3%;
    height: 56px;
  }

  .menu-content {
    position: fixed;
    top: 5%;
    right: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    cursor: pointer;
    background-color: $primary1;
    border-radius: $radiusLarge;
    transition: 0.1s ease-in-out;

    &-grid {
      display: none;
    }

    &:hover,
    &.hover {
      display: block;
      width: 300px;
      height: 75px;
      background-color: #ffffff;
      box-shadow: $shadow1;

      .avatar {
        display: none;
      }

      .menu-content-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        padding: 10px;

        .item {
          font-size: $sSmall;
          text-align: center;
          cursor: pointer;

          &:hover {
            background-color: $dark5;
            border-radius: $radiusMiddle;
          }
        }
      }
    }
  }
}
</style>
